/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 拼多多投诉工单
 *  */
import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ComplaintOrder, { ComplaintOrderPropsType } from './components/ComplaintOrder';
import { Tabs } from 'antd';

interface TabListItem {
  key: ComplaintOrderPropsType;
  tab: string;
}

const TableList: React.FC = () => {
  const [activeKey, setActiveKey] = useState('secondComplaint');
  const handleTabChange = (key: string) => setActiveKey(key);
  const tabList: TabListItem[] = [
    {
      tab: '一次投诉',
      key: 'todo',
    },
    {
      tab: '二次投诉',
      key: 'secondComplaint',
    },
    {
      tab: '已完结',
      key: 'finished',
    },
  ];
  return (
    <PageContainer>
      <Tabs onChange={handleTabChange}>
        {tabList.map((item) => (
          <Tabs.TabPane tab={item.tab} key={item.key}>
            <ComplaintOrder type={item.key} activeKey={activeKey as ComplaintOrderPropsType} />
          </Tabs.TabPane>
        ))}
      </Tabs>
    </PageContainer>
  );
};

export default TableList;
